{% extends 'home/index.html'%}
{% block title %}
<title>个人地址管理</title>
{% endblock %}

{% block css %}
<link href="/static/home/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/home/css/addstyle.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block con %}
<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="{% url 'home_index'%}">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails AddressAll" >
                    {% for i in data%}
                    <li class="user-addresslist {% if i.ischecked %} defaultAddr {% endif %}" aid="{{ i.id }}">
                        <span class="new-option-r moren"  ><i class="am-icon-check-circle"></i>默认地址</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt">{{ i.shouhuoren }}</span>
                            <span class="new-txt-rd2">{{ i.shouhuophone }}</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">{{ i.sheng }}</span>
                                <span class="city">{{ i.shi }}</span>
                                <span class="dist">{{ i.xian }}</span>
                                <span class="street">{{ i.info }}</span></p>
                        </div>
                        <div class="new-addr-btn">
                            <a href="#"><i class="am-icon-edit"></i>编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a href="javascript:void(0);" class="shanchu"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>
                    {% endfor %}


                   
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                           <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">
                                        收货人
                                    </label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name" placeholder="收货人">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">
                                        手机号码
                                    </label>
                                    <div class="am-form-content">
                                        <input id="user-phone" placeholder="手机号必填" type="email">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">
                                        所在地
                                    </label>
                                    <div class="am-form-content address">
                                        <select name="sheng">
                                            {% for i in citys %}
                                            <option value="{{ i.id }}">{{ i.name }}</option>>
                                            {% endfor %}
                                        </select>

                                        <select name="shi">
                                            <option>--请选择--</option>
                                        </select>
                                        <select name="xian">
                                            <option>--请选择--</option>
                                        </select>
                                       
                                        
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">
                                        详细地址
                                    </label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                        <small>
                                            100字以内写出你的详细地址...
                                        </small>
                                    </div>
                                </div>
                                <div class="am-form-group theme-poptit">
                                    <div class="am-form-group">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <a class="am-btn am-btn-danger" id="addressadd">保存</a>
                                            <a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function() {                          
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });
                    
                    var $ww = $(window).width();
                    if($ww>640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }
                    
                })
            </script>

            <div class="clear"></div>

        </div>
   
    </div>

    <aside class="menu">
        <ul>
            <li class="person">
                <a href="index.html">个人中心</a>
            </li>
            <li class="person">
                <a href="#">个人资料</a>
                <ul>
                    <li> <a href="{% url 'home_personalinformation'%}">个人信息</a></li>
                    <li class="active"> <a href="{% url 'home_addressmanage'%}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li><a href="{% url 'home_myorderinfo'%}">订单管理</a></li>
                </ul>
            </li>
           

           

        </ul>

    </aside>
</div>
<script type="text/javascript">


    // 设为默认 单击事件
    $('.moren').on('click',function(){
        // 获取当前地址的id
        var aid = $(this).parents('li').attr('aid')
        // console.log(aid)
        // 发送ajax请求
        $.get('{% url 'home_addressdefault' %}',{'aid':aid},function(){
            getUserAlladdress()

        },'json')
    })


    // 用户添加新地址,地址存好就可以存入数据库
     $('#addressadd').click(function(){
        var addrs = {}
        addrs.shouhuoren = $('#user-name').val()
        addrs.shouhuophone = $('#user-phone').val()
        addrs.sheng = $('select[name=sheng]').val()
        addrs.shi = $('select[name=shi]').val()
        addrs.xian = $('select[name=xian]').val()
        addrs.info = $('#user-intro').val()

        // 发送ajax请求，向数据库存地址
        $.get('{% url 'home_addressadd' %}',addrs,function(data){
            alert(data.msg)
            location.href="{% url 'home_addressmanage' %}"
        },'json')
        


    })
    getUserAlladdress()


    // 获取当前用户的所有收货地址
    function getUserAlladdress(){
        // 清空之前的数据，从数据库全部重新加载
        // $('.AddressAll').empty()
        // 发送ajax请求，获取收货地址的数据
        $.get('{% url 'home_addressget' %}',function(data){
            // console.log(data,typeof(data))
            if(data.error == 0){
                // 将获得的数据赋值
                var arr = data.data1
                // 循环数据
                for (var i = 0;i<arr.length;i++){
                    // 将显示收货地址的li复制
                    var li = $('.address li').eq(0).clone()
                    // 判断当前是否为默认
                    if(arr[i].ischecked){

                        // 给该收货地址添加默认样式
                        li.addClass('defaultAddr')
                        // 创建元素

                    }
                    // 显示收货信息
                    li.find('.buy-user').text(arr[i].shouhuoren)
                    li.find('.buy-phone').text(arr[i].shouhuophone)
                    li.find('.province').text(arr[i].sheng)
                    li.find('.city').text(arr[i].shi)
                    li.find('.dist').text(arr[i].xian)
                    li.find('.street').text(arr[i].info)
                    li.attr('aid',arr[i].id)
                    // 让元素显示
                    li.show()
                    // 将li加入到ul中
                    $('.AddressAll').append(li)
                }
            }else{
                // 如果没有数据
                alert(data['msg'])
            }
        },'json')
    }


     // 获取页面中的下拉框，绑定change事件
    $('.address select').click(function(){
        // 获取当前选中元素的id
        var id = $(this).val()

        // 此时发送ajax请求，获取下一级的数据
        $.get('{% url "home_getcitys" %}',{'id':id},function(data){
            // 如果返回的数据为空，就不执行下面的语句
            if(data.length==0){
                return ;
            }
            // 判断级别　如果是二级，就是市级
            if(data[0].level == 2){
                var sel = $('.address select[name=shi]')
                // 如果是三级，就是县级
            }else if(data[0].level == 3){
                var sel = $('.address select[name=xian')
            }else{
                return;
            }

            // 定义一个空的字符串，拼接option
            var ops = ''
            // 遍历获取的结果，拼接成option选项
            for(var i=0;i<data.length;i++){
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 然后把拼接好的选项加入到下拉框中
            sel.html(ops)
        },'json')
    })


    // 删除收货地址
    $('.shanchu').on('click',function(){
        // console.log('lalala')
        // 获取当前地址的id
        var aid = $(this).parents('li').attr('aid')
        d = $(this)
        // 发送ajax请求
        $.get('{% url 'home_addressdel' %}',{'aid':aid},function(data){
            if (data['error']==0){
                d.parents('li').remove()
            }

        },'json')
    })

</script>

{% endblock %}
